MCP服务器集成：给AI装上"插件系统"
章节概述
MCP（Model Context Protocol）是Anthropic推出的开源协议，让AI应用能够连接外部数据源和工具。就像浏览器有扩展商店、VS Code有插件市场一样，MCP给Claude、Cursor、VS Code等AI客户端装上了一个统一的"插件系统"。本节将从真实开发者数据出发，带你了解哪些MCP服务器真正好用、如何自己动手做一个MCP服务器，以及MCP有哪些让人眼前一亮的酷炫玩法。
一、MCP是什么：AI世界的"USB-C接口"
1.1 一句话理解
MCP定义了AI应用与外部系统之间的通信规范。你可以把它理解为AI世界的USB-C接口——统一的连接标准，一个MCP服务器可以同时被Claude、ChatGPT、Cursor、VS Code等多个客户端使用，不用重复开发。
1.2 MCP的三大核心价值
| 价值维度 | 传统方式 | MCP方式 |
|---|---|---|
| 开发成本 | 每个AI平台单独集成 | 一次开发，多平台复用 |
| 维护负担 | API变更需要逐个更新 | 协议稳定，更新透明 |
| 生态规模 | 孤立的插件生态 | 数千个共享服务器（awesome-mcp-servers 清单 + Smithery/FastMCP 注册平台） |
1.3 支持的AI客户端（2026年1月已全部官方支持）
| 客户端 | 特点 |
|---|---|
| Claude Code | 终端原生，开发者首选 |
| Claude Desktop | 桌面应用，最完善的MCP实现 |
| Cursor | 代码编辑器深度集成 |
| VS Code (Copilot) | 全球开发者覆盖率最高 |
| Windsurf | Codeium出品的新一代AI IDE |
| Zed | Rust编写的高性能编辑器 |
二、开发者真正在用的MCP服务器
以下排名综合自 FastMCP 注册平台 1864+ 服务器的真实使用数据（2026年2月），以及多个开发者社区的实际推荐。
2.1 热度 TOP 10 榜单
| 排名 | 服务器 | 功能 | 为什么受欢迎 |
|---|---|---|---|
| 1 | Context7 | 注入版本精确的代码文档 | 解决AI幻觉问题，写代码时随时查最新API文档 |
| 2 | Playwright (Browser) | 浏览器自动化 | 让AI真正能"看到"网页、操作网页 |
| 3 | Sequential Thinking | 结构化思考 | 让AI分步骤思考复杂问题，输出更靠谱 |
| 4 | GitHub | 代码仓库操作 | 读代码、看PR、管Issue，开发日常必备 |
| 5 | Desktop Commander | 本地文件和系统操作 | 比官方filesystem更强，支持shell命令 |
| 6 | Memory | AI长期记忆 | 跨会话记住你的偏好和项目上下文 |
| 7 | Firecrawl | 网页抓取和爬取 | 把任何网页变成AI能理解的干净内容 |
| 8 | Filesystem | 文件系统操作 | 官方出品，安全可靠的基础文件访问 |
| 9 | Notion | Notion文档管理 | 直接读写Notion，文档工作流无缝衔接 |
| 10 | Figma | 设计稿读取 | 设计师和前端开发者的桥梁 |
Sequential Thinking 的定位：它让 AI 分步骤思考复杂问题、可本地运行零依赖。Claude Code 内置的 Plan 模式可以看作它的"简化版"——日常规划用 Plan 模式就够；但写结构性很强的长文档（产品 PRD、技术方案）时，Sequential Thinking 的逐步推演仍然更可控。
2.2 前端开发者必装的MCP服务器
| 服务器 | 解决什么痛点 | 安装方式 |
|---|---|---|
| Context7 | AI写Vue/React代码时API记错 → 实时查最新文档 | 远程服务器，无需安装 |
| Playwright | AI看不到页面效果 → 浏览器自动化截图+交互 | npx @playwright/mcp |
| Figma MCP | 设计稿和代码割裂 → AI直接读设计稿生成代码 | npx figma-mcp |
| Firecrawl | 需要参考网页内容 → 抓取任意网页转Markdown | npx firecrawl-mcp |
| Vercel MCP | 部署流程繁琐 → AI直接帮你部署和预览 | Vercel 官方集成 |
2.3 生态趋势：MCP Apps 官方认证
2026年1月，Anthropic推出了 MCP Apps 计划，Stripe、Notion、Figma、GitHub等头部产品陆续推出官方MCP服务器。这意味着MCP正在从"社区玩具"走向"行业标准"——未来主流SaaS产品都会原生支持MCP，AI与业务系统的连接会越来越无缝。（补充：MCP 协议已于 2025 年 12 月捐赠给 Linux Foundation 的 Agentic AI Foundation，治理权交还给开放社区，进一步确立了其作为行业标准的地位。）国内开发者目前用得不多，但值得持续关注。
三、酷炫的MCP玩法
3.1 玩法一：AI自动帮你部署网站
你：把这个Vue项目部署到Vercel上，域名用 my-app.vercel.app
AI：[通过Vercel MCP]
1. 检查项目配置 → package.json、构建脚本
2. 运行构建 → npm run build
3. 部署到Vercel → 自动创建项目
4. 配置域名 → my-app.vercel.app 已就绪
5. 部署成功！访问 https://my-app.vercel.app
text
用到的MCP：Vercel MCP + Filesystem MCP
3.2 玩法二：AI帮你做设计稿还原
你：把这个Figma设计稿还原成Vue组件
AI：[通过Figma MCP + Playwright MCP]
1. 读取Figma设计稿 → 获取布局、颜色、字体信息
2. 生成Vue组件代码 → Tailwind CSS样式
3. 本地启动预览 → 浏览器截图对比
4. 微调差异 → 字体间距、颜色修正
5. 还原完成，相似度95%
text
用到的MCP：Figma MCP + Playwright MCP
3.3 玩法三：AI自动写技术博客
你：帮我把这个GitHub仓库的功能写一篇技术博客
AI：[通过GitHub MCP + Firecrawl MCP]
1. 读取仓库代码和README → 理解项目功能
2. 搜索相关技术文章 → 补充背景知识
3. 生成博客草稿 → 结构化的技术文章，直接输出Markdown文件
text
用到的MCP：GitHub MCP + Firecrawl MCP
3.4 玩法四：AI帮你做竞品调研
你：调研一下 Ant Design 和 Element Plus 的最新版本文档，对比它们在表格组件上的差异
AI：[通过Firecrawl MCP + Context7]
1. 抓取Ant Design最新文档 → Table组件API
2. 查询Element Plus文档 → Table组件API
3. 生成对比报告 → 功能、性能、API差异
text
用到的MCP：Firecrawl MCP + Context7
3.5 玩法五：多MCP联动——全自动前端工作流
你：帮我把这个需求从Jira拿到代码实现、测试、部署全搞定
AI工作流：
1. [Jira MCP] 读取需求详情 → 理解验收标准
2. [GitHub MCP] 创建feature分支
3. [Context7] 查询相关组件文档
4. [Filesystem] 编写Vue组件代码
5. [Playwright] 自动化测试截图验证
6. [GitHub MCP] 创建PR并关联Jira
7. [Vercel MCP] 部署预览环境
text
这就是MCP最强大的地方——多个MCP服务器像乐高积木一样组合，形成完整的自动化工作流。
四、去哪里找MCP服务器
| 平台 | 特点 | 链接 |
|---|---|---|
| Smithery | 6000+服务器，CLI一键安装到Claude/Cursor | smithery.ai |
| MCPmarket | 国内中文市场，支持在线试用 | mcpmarket.cn |
| AIBase排行榜 | 按热度/评分排名，发现热门MCP | mcp.aibase.com/zh/ranking |
| awesome-mcp-servers | GitHub 9.7万+ Star，社区精选列表（2026-11-07 核实） | github.com/punkpeye/awesome-mcp-servers |
| MCP官方Registry | Anthropic官方维护 | registry.modelcontextprotocol.io |
其中 Smithery 支持命令行直接安装，最方便：
# 搜索服务器
npx @smithery/cli@latest search "browser"
# 一键安装到Claude Code
npx @smithery/cli@latest install @playwright/mcp --client claude-code
bash
建议：先想清楚"我需要AI帮我做什么"，再针对性地搜，别逛市场式地装一堆。
五、自己动手做一个MCP服务器
5.1 MCP服务器的核心概念
一个MCP服务器本质上就是一个程序，它对外暴露三种能力：
| 能力 | 作用 | 通俗理解 |
|---|---|---|
| Tools（工具） | AI可以调用的函数 | "AI能做什么事" |
| Resources（资源） | AI可以读取的数据 | "AI能看到什么" |
| Prompts（提示词） | 预设的交互模板 | "AI怎么和你对话" |
5.2 用 TypeScript 写一个"天气查询"MCP服务器
这是最简单、最适合入门的例子。我们使用 Open-Meteo 天气 API —— 开源免费，无需注册，无需 API Key（免费额度有每小时请求上限，教学和自用足够）。
第零步：用 mcp-builder 生成（推荐）
不必从空白文件写起。官方 Skills 仓库里的 mcp-builder 就是干这个的，在 Claude Code 里一句描述即可：
/mcp-builder 我想创建一个 MCP 服务对接天气接口，接口用 open-meteo（免费无需 Key），
端点：https://api.open-meteo.com/v1/forecast
在当前目录创建，取名 weather-mcp
text
它会生成完整的项目骨架（TypeScript + @modelcontextprotocol/sdk + zod）和三个工具：查当前天气、查天气预报、查小时预报。实测中还有个惊喜：初版工具只收经纬度参数，当你在测试里说"查询北京的天气"时，模型会主动发现"工具只支持经纬度不方便"，自动接一个免费的地理编码 API 把城市名转成经纬度，并保持原有 latitude/longitude 参数兼容——用自然语言验收，让模型自己补齐易用性，这是和 AI 结对开发 MCP 的正确姿势。
下面我们看它生成的核心代码长什么样（手动写也是同样的结构）：
第一步：初始化项目
mkdir my-weather-mcp && cd my-weather-mcp
npm init -y
npm install @modelcontextprotocol/sdk zod
bash
第二步：编写服务器代码
// index.ts
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
// 创建 MCP 服务器实例
const server = new McpServer({
name: "weather-server",
version: "1.0.0",
});
// 工具一：查询当前天气
server.tool(
"get_weather",
"查询指定城市的当前天气",
{ city: z.string().describe("城市名称，如：北京、上海") },
async ({ city }) => {
// 城市名 → 经纬度（Open-Meteo 免费地理编码）
const geoRes = await fetch(
`https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(city)}&count=1&language=zh`
);
const geoData = await geoRes.json();
if (!geoData.results?.length) {
return { content: [{ type: "text", text: `未找到城市：${city}` }] };
}
const { latitude, longitude, name } = geoData.results[0];
// 经纬度 → 当前天气（Open-Meteo 免费天气API，无需Key）
const weatherRes = await fetch(
`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true&timezone=auto`
);
const weatherData = await weatherRes.json();
const current = weatherData.current_weather;
return {
content: [{
type: "text",
text: `${name}当前天气：温度 ${current.temperature}°C，风速 ${current.windspeed} km/h`,
}],
};
}
);
// 工具二：查询未来3天天气预报
server.tool(
"get_forecast",
"查询指定城市未来3天天气预报",
{ city: z.string().describe("城市名称") },
async ({ city }) => {
const geoRes = await fetch(
`https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(city)}&count=1&language=zh`
);
const geoData = await geoRes.json();
if (!geoData.results?.length) {
return { content: [{ type: "text", text: `未找到城市：${city}` }] };
}
const { latitude, longitude, name } = geoData.results[0];
const forecastRes = await fetch(
`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=temperature_2m_max,temperature_2m_min,weathercode&timezone=auto&forecast_days=3`
);
const forecastData = await forecastRes.json();
const daily = forecastData.daily;
const forecast = daily.time.map((date: string, i: number) =>
`${date}：${daily.temperature_2m_min[i]}°C ~ ${daily.temperature_2m_max[i]}°C`
).join("\n");
return {
content: [{ type: "text", text: `${name}未来3天预报：\n${forecast}` }],
};
}
);
// 启动服务器（通过 stdio 通信）
const transport = new StdioServerTransport();
await server.connect(transport);
typescript
第三步：编译
# 安装 TypeScript 编译器
npm install -D typescript @types/node
npx tsc --init --module nodenext --moduleResolution nodenext --target es2022
npx tsc
bash
第四步：在 Claude Code 中配置
用命令注册到用户作用域（所有项目可用，不需要 API Key）：
claude mcp add weather --scope user -- node /path/to/my-weather-mcp/dist/index.js
bash
或手动在项目根目录 .mcp.json 里添加：
{
"mcpServers": {
"weather": {
"command": "node",
"args": ["/path/to/my-weather-mcp/dist/index.js"]
}
}
}
json
配置完成后你就可以这样用了：
你：帮我查一下北京现在的天气，看看适不适合户外跑步
Claude：[调用 get_weather 和 get_forecast 工具]
北京当前天气：温度 22°C，风速 12 km/h
北京未来3天预报：
2026-04-06：15°C ~ 28°C
2026-04-07：13°C ~ 25°C
2026-04-08：14°C ~ 26°C
适合户外跑步，温度舒适，注意明天降温。
text
为什么选 Open-Meteo？ 它是完全开源的天气 API（GitHub 3K+ Star），免费用于非商业用途，全球天气数据覆盖。最大的优势是不需要注册、不需要 API Key，直接 fetch 调用即可。相比和风天气、OpenWeatherMap 等需要注册和 Key 的 API，它是最适合教学和快速入门的选择。
5.3 用 Python 写一个"翻译助手"MCP服务器
Python版更简洁，适合快速原型：
pip install mcp
bash
# translate_server.py
from mcp.server.fastmcp import FastMCP
mcp = FastMCP("translate-server")
@mcp.tool()
async def translate(text: str, target_lang: str = "en") -> str:
"""翻译文本到目标语言（支持 en/ja/ko/fr/de 等主流语言）
Args:
text: 要翻译的文本
target_lang: 目标语言代码，默认英语
"""
# 使用免费的翻译API（无需key）
import httpx
response = await httpx.get(
"https://api.mymemory.translated.net/get",
params={"q": text, "langpair": f"zh|{target_lang}"}
)
data = response.json()
return data["responseData"]["translatedText"]
@mcp.tool()
async def batch_translate(texts: list[str], target_lang: str = "en") -> list[str]:
"""批量翻译多段文本"""
results = []
for text in texts:
result = await translate(text, target_lang)
results.append(result)
return results
if __name__ == "__main__":
mcp.run()
python
配置方式：
{
"mcpServers": {
"translate": {
"command": "python",
"args": ["/path/to/translate_server.py"]
}
}
}
json
5.4 TypeScript vs Python：选哪个？
| 维度 | TypeScript | Python |
|---|---|---|
| SDK成熟度 | @modelcontextprotocol/sdk 官方维护 | mcp 官方维护 |
| 适合人群 | 前端开发者（你） | 后端/数据开发者 |
| 生态集成 | 和npm生态无缝衔接 | 和数据科学生态衔接 |
| 部署方式 | npx 一键运行 | pip install + python |
| 推荐场景 | 网页相关、文件操作、API集成 | 数据处理、ML模型、自动化脚本 |
前端开发者推荐从TypeScript入手，直接复用你已有的npm技能。
5.5 把你的MCP服务器发布到npm
做好的MCP服务器可以直接发到npm，让其他人也能用：
npm login
npm publish
bash
其他人安装：
{
"mcpServers": {
"your-server": {
"command": "npx",
"args": ["-y", "your-mcp-server-name"]
}
}
}
json
六、MCP配置实战
6.1 Claude Code 配置方式
Claude Code 的 MCP 配置是独立于 settings.json 的一套体系，有三个作用域，最推荐用命令行管理：
# 默认 local 作用域：写入 ~/.claude.json，只对你自己、只在当前项目生效
claude mcp add my-server -- npx -y my-mcp-server
# user 作用域：写入 ~/.claude.json，你的所有项目生效
claude mcp add my-server --scope user -- npx -y my-mcp-server
# project 作用域：写入项目根目录 .mcp.json，提交到 git 与团队共享
claude mcp add my-server --scope project -- npx -y my-mcp-server
# 其他常用命令
claude mcp list # 列出已配置的服务器
claude mcp remove # 删除
bash
手动编辑也行，对应两个文件：
| 作用域 | 文件 | 是否提交 Git |
|---|---|---|
| 项目共享 | 项目根目录 .mcp.json 的 mcpServers 字段 | 是 |
| 个人/用户 | ~/.claude.json 的 mcpServers 字段 | 否 |
注意：mcpServers 不要写进 .claude/settings.json——那是权限/Hooks/环境变量的地盘，MCP 有自己的文件（这点在 06 章"不要放到 settings.json 的配置"里也有对照）。配置完成后重启 Claude Code，用 /mcp 命令查看连接状态，看到目标服务器后面标着 connected 即成功。
6.2 Context7 的官方安装流程（带授权的 MCP 示范）
Context7 这类带鉴权的 MCP，官方提供了比手写 JSON 更省事的初始化命令：
npx ctx7 setup --claude
bash
流程：命令行引导 → 选择接入形态（MCP server 模式：Claude 默认调用 Context7 的工具集；CLI + Skills 模式：装一个 find-docs 技能，让 agent 自己查自己更新）→ 选择目标工具（Claude Code / Codex 等） → 跳转 OAuth 设备授权（GitHub 或 Google 账号登录，显示验证链接和短码）→ 自动生成 API Key 并写入配置。装完在 Claude Code 里输入 /mcp，看到 Context7 后面是 connected 就配置好了。
也可以走插件方式（无需 API Key，重启后 /mcp 里浏览器登录）：
/plugin marketplace add upstash/context7
/plugin install context7@context7-marketplace
text
不想装任何东西的话，直接用远程 URL 接入（无需本地 Node 进程）：.mcp.json 里写 "type": "url", "url": "https://mcp.context7.com/mcp"。
6.3 Filesystem 的两种部署形态
官方 filesystem 服务器有 Docker 和 npx 两种跑法，安全模型不同：
- Docker 方式（Windows 常用）：配置里是一组
src:dst目录映射——src 是你本机的目录，dst 是容器内的挂载点，把你的文件系统和 AI 隔离开。建议把 src 和 dst 配成同一路径（或统一挂到 Desktop/Projects 这类固定目录），AI 找文件不容易迷路 - npx 方式（mac 推荐）：
npx -y @modelcontextprotocol/server-filesystem /Users/你/projects直接操作本机路径，少一层 Docker 依赖
无论哪种，都只把需要的目录授权给 MCP，不要图省事挂整个用户目录。
6.4 推荐的前端开发者MCP配置组合
下面这段 JSON 放到项目根目录 .mcp.json（团队共享）或 ~/.claude.json（个人全局）：
{
"mcpServers": {
"context7": {
"type": "url",
"url": "https://mcp.context7.com/mcp"
},
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
},
"firecrawl": {
"command": "npx",
"args": ["-y", "firecrawl-mcp"],
"env": {
"FIRECRAWL_API_KEY": "fc-your-key"
}
},
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token"
}
},
"filesystem": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-filesystem",
"/Users/yourname/projects"
]
}
}
}
json
6.5 MCP调试指南
MCP调试分为两种场景：用别人的服务器出了问题 和 自己写的服务器跑不通。下面按排查顺序，从最简单到最深入。
场景一：别人写的MCP服务器连不上
第一步：检查配置文件JSON语法
配置文件写错是最常见的问题。可以用这个命令快速校验：
# Claude Code 全局配置
cat ~/.claude/settings.json | python3 -m json.tool
# Claude Desktop 配置（macOS）
cat ~/Library/Application\ Support/Claude/claude_desktop_config.json | python3 -m json.tool
bash
如果JSON语法有问题，会直接报错。常见错误：
- 多了逗号
{"a": 1, "b": 2,} - 少了引号
{command: "npx"} - 单引号代替双引号
{'command': 'npx'}
第二步：确认服务器能独立运行
脱离AI客户端，手动启动MCP服务器，看能不能跑起来：
# 测试 npx 类服务器
npx -y @playwright/mcp@latest
# 测试带环境变量的服务器
FIRECRAWL_API_KEY=fc-xxx npx -y firecrawl-mcp
# 测试自己写的TypeScript服务器
node /path/to/dist/index.js
# 测试自己写的Python服务器
python3 /path/to/translate_server.py
bash
MCP服务器启动后不会输出内容（它在等stdin输入），只要不报错就说明启动成功。如果启动就报错，说明是包或环境的问题，和AI客户端无关。
第三步：用MCP Inspector调试（官方工具）
MCP Inspector 是官方提供的可视化调试工具，能帮你：
- 列出服务器暴露的所有Tools和Resources
- 手动调用某个Tool并查看返回结果
- 查看完整的JSON-RPC通信日志
# 一键启动（自动连接你的MCP服务器）
npx @modelcontextprotocol/inspector node /path/to/your-server.js
# 连接远程MCP
npx @modelcontextprotocol/inspector --url https://mcp.context7.com/mcp
bash
启动后浏览器打开 http://localhost:6274。界面上先选 Transport Type：
| Transport | 含义 | 对应场景 |
|---|---|---|
| STDIO | 本地进程通信 | 绝大多数本地 MCP（npx 启动的都是） |
| SSE | 服务端推送流 | 旧式远程服务 |
| Streamable HTTP | 流式 HTTP | 现在的远程服务标准（Context7 这类） |
调试本地服务器的通用操作：把配置里的 command（如 npx）填到 Command 框、把 args（-y + 包名 + 目录参数）逐段填到 Arguments，点 Connect；左侧状态变绿后点 Tools > List Tools，就能看到这个服务器暴露的全部工具（filesystem 的 search_files / list_directory / directory_tree 等）。选中某个工具、填好参数、点 Run Tool，右侧就是它返回给 AI 的原始结果——AI"看到的"就是这份 JSON。写自己的 MCP 时，这也是最快的验收方式。
场景二：自己写的MCP服务器有问题
第一步：加日志定位问题
在Tool函数里加 console.error 输出调试信息（注意用 stderr 而不是 stdout，因为 stdout 被MCP协议占用）：
server.tool("get_weather", "查询天气", { city: z.string() }, async ({ city }) => {
console.error(`[DEBUG] 收到请求，city=${city}`); // stderr，不影响协议
try {
const response = await fetch(`https://api.example.com/weather?city=${city}`);
console.error(`[DEBUG] API响应状态: ${response.status}`);
const data = await response.json();
console.error(`[DEBUG] 解析数据:`, JSON.stringify(data).slice(0, 200));
return { content: [{ type: "text", text: `${city}天气：${data.weather}` }] };
} catch (err) {
console.error(`[ERROR] 请求失败:`, err);
return { content: [{ type: "text", text: `查询失败：${err}` }], isError: true };
}
});
typescript
然后在另一个终端查看日志：
# 如果你是在Claude Code里跑的，查看Claude Code的MCP日志
# macOS 日志位置
ls ~/Library/Logs/Claude/mcp*.log
# 实时查看
tail -f ~/Library/Logs/Claude/mcp*.log
bash
第二步：确认Tool注册成功
服务器启动后，用 Inspector 检查你的Tool是否被正确注册：
1. 启动 Inspector → npx @modelcontextprotocol/inspector node dist/index.js
2. 打开 http://localhost:6274
3. 点击 "Tools" 标签 → 应该能看到你注册的 get_weather
4. 点击该Tool → 填入参数 → 点"Call" → 查看返回结果
text
第三步：常见自建MCP问题速查
| 问题 | 原因 | 解决 |
|---|---|---|
| Tool没出现在列表里 | 注册代码没执行 | 检查server.tool()是否在server.connect()之前调用 |
| 返回结果AI看不到 | content格式不对 | 必须返回 { content: [{ type: "text", text: "..." }] } 格式 |
| 中文乱码 | 编码问题 | 确保文件是UTF-8编码，.ts文件顶部加 // @ts-check |
| 参数校验失败 | zod schema和调用参数不匹配 | 检查 z.string()、z.number() 类型定义是否正确 |
| 服务器启动后立即退出 | 代码异常 | 加 try/catch 包裹启动代码，console.error 打印异常 |
npx 缓存了旧版本 | npm缓存 | npx -y @your-package@latest 强制最新版，或 npm cache clean --force |
快速排查流程图
MCP不工作？
├── 服务器根本没出现在客户端列表？
│ ├── JSON语法错？ → 用 python3 -m json.tool 检查
│ ├── 路径错？ → 用绝对路径，不用 ~
│ └── 命令本身跑不起来？ → 手动执行命令测试
├── 服务器出现了但Tool调用失败？
│ ├── 用 Inspector 手动调Tool → 看报错信息
│ ├── API Key过期或缺失？ → 检查 env 配置
│ └── 网络问题？ → curl 测试API是否可达
└── Tool能调但AI不用它？
└── Tool描述不清楚？ → 改写 tool() 第二个参数的描述文本
text
七、MCP生态资源
7.1 必收藏的资源
| 资源 | 说明 | 链接 |
|---|---|---|
| modelcontextprotocol/servers | 官方参考实现仓库。注意现状：主仓库只维护少量精选服务器（Everything/Fetch/Filesystem/Git/Memory/Sequential Thinking/Time），大量旧参考实现已移入 modelcontextprotocol/servers-archived（停止维护） | github.com/modelcontextprotocol/servers |
| awesome-mcp-servers | 社区最大的 MCP 服务器汇总清单（数千个，Star 数以仓库页面为准） | github.com/punkpeye/awesome-mcp-servers |
| MCP官方文档 | 协议规范和SDK文档 | modelcontextprotocol.io/docs |
| FastMCP / Smithery | MCP 服务器注册平台，可搜索、对比、一键安装 | fastmcp.me / smithery.ai |
| MCP Inspector | 官方调试工具，测试你的MCP服务器 | github.com/modelcontextprotocol/inspector |
选官方服务器时认准主仓库的维护列表；在 Smithery 这类平台上按点赞数和用户数排序，排名靠前的就是经过大众验证的。
7.2 学习路径
- 入门：装一个 Context7 或 Playwright，感受MCP能做什么
- 进阶：组合 3-5 个MCP服务器，搭建自己的前端工作流
- 实战：用TypeScript写一个自己的MCP服务器
- 贡献：发布到npm或GitHub，让社区也能用
小结
MCP的核心价值不是"装了几个服务器"，而是让AI从"只会聊天"变成"能动手做事"。
- 选服务器：别贪多，3-5个够用（推荐 Context7 + Playwright + GitHub + Firecrawl）
- 自己造：TypeScript SDK 很简单，30行代码就能写一个MCP服务器
- 最酷的玩法：多个MCP联动，形成自动化工作流——这才是MCP真正的威力
记住一个原则：MCP是工具，不是目的。哪个能解决你当下的问题，就装哪个。
↑